<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import useFilterStore from '@/stores/filter'
import { ref, h, onMounted } from 'vue'
import { LogoutOutlined } from '@ant-design/icons-vue'
import { logOut, iframeLogOut } from '@/utils/http'
import { fullScreen, exitFullScreen } from '@/utils/fullScreen'

const filterStore = useFilterStore()

const disabledDate = (current: Dayjs) => {
  // Can not select days before today and today
  return (
    current &&
    (current < dayjs(filterStore.dateOption?.startYmd) ||
      current > dayjs(filterStore.dateOption?.endYmd))
  )
}

filterStore.getDate()

// const isFullScreen = ref(!!document.fullscreenElement || window.top !== window.self)
const isFullScreen = ref(false)

onMounted(() => {
  // isFullScreen.value = !!document.fullscreenElement || window.top !== window.self
  try {
    isFullScreen.value = !!document.fullscreenElement || !!window.top?.document.fullscreenElement
    console.log(
      'document.fullscreenElement',
      document.fullscreenElement,
      !!window.top?.document.fullscreenElement
    )
  } catch (error) {
    //
  }
})

function exitOrFullscreen() {
  if (window.top === window.self) {
    if (isFullScreen.value) {
      exitFullScreen()
    } else {
      fullScreen()
    }
  } else {
    window.top?.postMessage(
      {
        type: 'exitOrFullscreen',
        fullScreen: !isFullScreen.value
      },
      '*'
    )
  }
  isFullScreen.value = !isFullScreen.value
}

function handleClickLogOut() {
  if (window.top === window.self) {
    logOut()
  } else {
    iframeLogOut()
  }
}
</script>

<template>
  <header>
    <a-date-picker
      v-model:value="filterStore.date"
      :inputReadOnly="true"
      :allowClear="false"
      :showToday="false"
      format="YYYY/MM/DD"
      :disabledDate="disabledDate"
    >
      <template #suffixIcon>
        <SvgIcon name="drop-arrow" :size="16" />
      </template>
    </a-date-picker>
    <SvgIcon class="center" name="header-center-title" :size="[1010, 72]" />
    <div class="right">
      <Setting />
      <!-- <a-button type="primary" shape="circle">EXIT</a-button> -->
      <a-button
        class="exist"
        type="primary"
        shape="circle"
        :icon="h(LogoutOutlined)"
        @click="handleClickLogOut"
      />
      <a-button class="fullscreen" type="primary" shape="circle" @click="exitOrFullscreen">
        <SvgIcon :name="isFullScreen ? 'exit-fullscreen' : 'fullscreen'" :size="11" />
      </a-button>
    </div>
  </header>
</template>

<style lang="less" scoped>
header {
  position: relative;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .center {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  :deep(.ant-picker) {
    width: 115px;
  }
  .right {
    display: flex;
    align-items: center;
    gap: 8px;
    .exist {
      background-color: #1d2865;
      &:hover {
        background-color: #1549ff;
      }
    }
    .fullscreen {
      background-color: #1d2865;
      &:hover {
        background-color: #1549ff;
      }
    }
  }
}
</style>
